<template>
  <div class="performance-list">
    <a-card title="绩效列表" class="list-card">
      <template #extra>
        <a-button type="primary" @click="goToAdd">添加绩效</a-button>
      </template>

      <div class="search-bar">
        <a-form layout="inline" :model="searchForm">
          <a-form-item label="员工姓名">
            <a-input v-model:value="searchForm.employeeName" placeholder="输入员工姓名" />
          </a-form-item>
          <a-form-item label="考核类型">
            <a-select
                v-model:value="searchForm.type"
                style="width: 150px"
                placeholder="选择考核类型"
            >
              <a-select-option v-for="item in performanceTypes" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">重置</a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-spin :spinning="loading">
        <a-table
            :columns="columns"
            :data-source="performanceData"
            :pagination="pagination"
            row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'type'">
              {{ getTypeLabel(record.type) }}
            </template>
            <template v-if="column.key === 'score'">
              <a-rate :value="record.score" disabled />
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="viewDetail(record.id)">查看</a-button>
                <a-button size="small" @click="editPerformance(record.id)">编辑</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { getPerformanceList, getMockPerformanceTypes } from '@/api/performance'

const router = useRouter()

// 表格列配置
const columns = [
  {
    title: '员工姓名',
    dataIndex: 'employeeName',
    key: 'employeeName'
  },
  {
    title: '工号',
    dataIndex: 'employeeId',
    key: 'employeeId'
  },
  {
    title: '考核类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '考核周期',
    dataIndex: 'period',
    key: 'period'
  },
  {
    title: '评分',
    dataIndex: 'score',
    key: 'score'
  },
  {
    title: '考核人',
    dataIndex: 'reviewer',
    key: 'reviewer'
  },
  {
    title: '操作',
    key: 'action',
    width: '150px'
  }
]

// 数据状态
const performanceData = ref([])
const loading = ref(false)
const performanceTypes = ref([])
const searchForm = ref({
  employeeName: '',
  type: undefined
})
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true
})

// 获取考核类型标签
const getTypeLabel = (value) => {
  const type = performanceTypes.value.find(item => item.value === value)
  return type ? type.label : '未知类型'
}

// 获取绩效列表
const fetchPerformanceList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      pageSize: pagination.value.pageSize,
      ...searchForm.value
    }
    const res = await getPerformanceList(params)
    performanceData.value = res.data.list
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取绩效列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 获取绩效类型
const fetchPerformanceTypes = async () => {
  try {
    const res = await getMockPerformanceTypes()
    performanceTypes.value = res.data
  } catch (error) {
    console.error('获取绩效类型失败', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  fetchPerformanceList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    employeeName: '',
    type: undefined
  }
  handleSearch()
}

// 查看详情
const viewDetail = (id) => {
  router.push(`/performance/detail/${id}`)
}

// 编辑绩效
const editPerformance = (id) => {
  router.push(`/performance/edit/${id}`)
}

// 跳转到添加页面
const goToAdd = () => {
  router.push('/performance/add')
}

// 初始化加载数据
onMounted(() => {
  fetchPerformanceList()
  fetchPerformanceTypes()
})
</script>

<style scoped>
.performance-list {
  padding: 20px;
}

.list-card {
  border-radius: 8px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>